<template>
  <view>
    <view class="w-100 fixed bottom0 pb-5 left0 option z-9999">
      <view class="w-100 px-4">
        <view class="w-100 f-b-c bg-theme_3 h100 circle120">
          <view class="pl-1 font28 font700 t-w f-y-c">
            <view
              class="w84 h84 p-1 bg-theme_2 rounded-circle mr-3 re"
              @click="car_info"
            >
              <image src="../../../static/footer/icon_4.png" class="w64 h64" />
              <view
                class="ab top0 ty-car bg-er font24 font700 f-c-c h38 rounded-circle px-1"
                >{{ food_number }}</view
              >
            </view>
            <text class="font24 font400 mr-05">合计</text>¥{{ food_money }}
            <!-- <text class="font21 t-theme font500 mx-06 pl-1">已优惠￥{{food_number}}</text> -->
          </view>
          <view
            v-if="isLogin"
            class="w220 h100 f-c-c bg-theme circle120 font28 font700 t-20"
            @click="get_purchass"
            >去支付</view
          >
          <view
            v-else
            class="w220 h100 f-c-c bg-theme circle120 font28 font700 t-20"
            @click="set_go_login"
            >去登录</view
          >
        </view>
      </view>
    </view>
    <uni-popup ref="food_car" type="bottom" class="z-99" @change="set_show_car">
      <view class="w-100 h824 rounded-top-left-54 ov-hd">
        <view class="w-100 h160 bg-f8ff">
          <view
            class="w-100 h-100 bg-theme f-b-c rounded-bottom-54 t-0 font25 font500 px-2-6"
          >
            <view class="ml-2">已选商品</view>
            <view class="w200 h64 f-c-c circle20 bg-f8ff" @click="clear_car"
              >清空购物车</view
            >
          </view>
        </view>
        <view class="w-100 h664 bg-theme">
          <view class="w-100 h-100 bg-f8ff rounded-right-54 re">
            <scroll-view
              class="scroll-view_H uni-scroll"
              scroll-y="true"
              scroll-with-animation
            >
              <view
                class="px-5 f-b-c h156 py-2 border-bottom"
                v-for="(item, index) in food_car"
                :key="item.id"
              >
                <view class="f-y-s">
                  <ImageFile
                    :url="item.thumbnail"
                    mode="aspectFill"
                    className="w116 h116 circle12"
                  />
                  <view class="pl-2 h116 fs-b-b w380 font600 t-20">
                    <view class="w-100 font32">{{ item.name }}</view>
                    <view class="w-100 font28"
                      ><text class="font20 font400">¥</text
                      >{{ item.price }}</view
                    >
                  </view>
                </view>
                <view class="f-b-c">
                  <view
                    class="w64 h64 f-c-c"
                    @click="set_reduce(item, index)"
                    v-if="item.number"
                  >
                    <view
                      class="w40 h40 font40 font600 rounded-circle f-c-c pb-1"
                      :class="item.number <= 0 ? 't-3' : 't-20 bg-theme'"
                      >-</view
                    >
                  </view>
                  <view
                    class="px-2 h64 font28 font500 t-20 f-c-c"
                    v-if="item.number > 0"
                    >{{ item.number }}</view
                  >
                  <view class="w64 h64 f-c-c" @click="set_add(item, index)">
                    <view
                      class="w40 h40 font40 font600 rounded-circle t-20 f-c-c pb-1 bg-theme"
                      >+</view
                    >
                  </view>
                </view>
              </view>
              <view v-if="food_number <= 0" class="w-100 py-6 font28 t-20 t-a"
                >暂无数据</view
              >
            </scroll-view>
          </view>
        </view>
      </view>
    </uni-popup>
    <!-- 提示窗示例 -->
    <uni-popup ref="alertDialog" type="dialog">
      <uni-popup-dialog
        class="bg-theme"
        cancelText="取消"
        confirmText="确定"
        title="通知"
        content="确定要清空购物车吗？"
        @confirm="dialogConfirm"
        @close="dialogClose"
      ></uni-popup-dialog>
    </uni-popup>
    <SignUp ref="signUp" />
  </view>
</template>

<script>
import { mapState, mapActions } from "vuex";
import verifyLogin from "../../../common/isLogin.js";
import ImageFile from "../../../components/img_file.vue";
export default {
  mixins: [verifyLogin],
  components: {
    ImageFile,
  },
  data() {
    return {
      show_car: false,
      path: "",
    };
  },
  computed: {
    ...mapState("food", ["food_number", "food_money", "food_car"]),
  },
  created() {
    this.path = uni.getStorageSync("host") || "";
  },
  methods: {
    ...mapActions("food", [
      "set_change_food_shop_car",
      "set_clear_food_shop_car",
    ]),
    get_purchass() {
      if (!this.verify_login()) return;
      if (this.food_number) {
        uni.navigateTo({
          url: "/pages/food/purchass",
        });
      } else {
        uni.showToast({
          title: "请选择商品",
          icon: "none",
        });
      }
    },
    set_show_car(val) {
      this.show_car = val.show;
    },
    car_info() {
      if (this.show_car) {
        this.$refs.food_car.close();
      } else {
        this.$refs.food_car.open();
      }
    },
    set_reduce(obj) {
      let data = {
        id: obj.id,
      };
      // 新增才有 obj 参数 购物车中数量少于1 做删除
      data.type = obj.number <= 1 ? "delete" : "reduce";

      this.set_change_food_shop_car(data);
    },
    set_add(obj) {
      let data = {
        id: obj.id,
        type: "plus",
      };
      this.set_change_food_shop_car(data);
    },
    // 清空购物车
    clear_car() {
      this.$refs.alertDialog.open();
    },
    dialogConfirm() {
      this.set_clear_food_shop_car();
    },
    dialogClose() {
      this.$refs.alertDialog.close();
    },
  },
};
</script>

<style scoped lang="scss">
.ty-car {
  right: -24rpx;
}
.scroll-view_H {
  position: absolute;
  top: 20rpx;
  left: 0;
  bottom: 170rpx;
  right: 0;
  z-index: 9;
}
.rounded-top-left-54 {
  border-radius: 54rpx 54rpx 0 0;
}
.h824 {
  height: 824rpx;
}
</style>
